<template>
  <header class="header">
    <Menu mode="horizontal" theme="primary" :active-name="active" @on-select="selMenu">
      <MenuItem :name="item.name" v-for="item in menu_list" :key="item.name">
        <Icon :type="item.icon"></Icon>
        {{item.title}}
      </MenuItem>
    </Menu>
  </header>
</template>

<script>
  import {remote} from 'electron'

  export default {
    name: 'headMenu',
    data() {
      return {
        active: 'userlist',
        menu_list: [{
          name: 'setup',
          title: '系统设置',
          icon: 'ios-cog-outline'
        }, {
          name: 'userlist',
          title: '用户管理',
          icon: 'ios-people-outline'
        }, {
          name: 'demo',
          title: '演示',
          icon: 'ios-monitor-outline'
        }, {
          name: 'exit',
          title: '退出',
          icon: 'ios-close-outline'
        }]
      }
    },
    methods: {
      selMenu(name) {
        switch (name) {
          case 'exit':
            remote.app.quit()
            break
          default:
            if (name === this.active) {
              break
            } else {
              this.active = name
              this.$router.push({
                name
              })
              break
            }
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  .header
    -webkit-app-region: drag
    .ivu-menu-item
      -webkit-app-region: no-drag
      font-size 16px
      .ivu-icon
        font-size 24px
        vertical-align middle
</style>
